import * as dat from 'dat.gui';
import * as fs from 'fs';
import { editorCore, getEditorAPI, NodeInfo } from ".";

// const gui = new dat.GUI({ autoPlace: false });

export class Inspector {
    gui: any;
    root: any;

    initView() {
        this.gui = new dat.GUI({ autoPlace: false });
        const customContainer = document.getElementById('inspector');
        customContainer.appendChild(this.gui.domElement);
        editorCore.addListenerOnSelectNode((node: NodeInfo) => {
            this.updateInspector(node)
        })
    }

    private updateInspector(nodeInfo: NodeInfo) {
        // console.log (nodeInfo.uuId)
        if (this.root) {
            this.gui.removeFolder(this.root)
        }
        this.root = this.gui.addFolder(`GameObject:${nodeInfo.name}`);
        this.root.open();

        let gameObjectName = { name: nodeInfo.name.slice(0, nodeInfo.name.indexOf('.')) };
        const controller = this.root.add(gameObjectName, "name", gameObjectName.name);
        controller.onFinishChange(function (value) {
            const editorAPI = getEditorAPI();
            editorAPI.setGameObjectName(nodeInfo.uuId, gameObjectName.name);
            const saveData = editorAPI.save();
            fs.writeFileSync(editorAPI.currentSceneFilePath, saveData, 'utf-8');
            editorAPI.changeScene(editorAPI.currentSceneFilePath);
        });

        for (let script of nodeInfo.scripts) {
            const scriptRoot = this.root.addFolder(`脚本名称:${script.name}`);
            scriptRoot.open();
            for (let property of script.properties) {
                const host = new PropertyEditComponentHost(script.uuId);
                host.scriptRoot = scriptRoot;
                property.createPropertyEditor(host);
            }
        }

        this.root.add({
            '添加组件': () => {
                console.log('添加组件')

                const editorAPI = getEditorAPI();
                const list = editorAPI.getScriptsList();
                console.log(list)
                let scriptName = { name: 'SpriteRenderer' };
                const folder = this.root.addFolder("脚本列表");
                folder.open();
                folder.add(scriptName, 'name', list);
                folder.add({
                    '保存添加': () => {
                        editorAPI.addScript(nodeInfo.uuId, scriptName.name);
                        const saveData = editorAPI.save();
                        fs.writeFileSync(editorAPI.currentSceneFilePath, saveData, 'utf-8');
                        this.root.removeFolder(folder);
                        editorAPI.changeScene(editorAPI.currentSceneFilePath);
                    }
                }, "保存添加");
                folder.add({
                    "取消添加": () => {
                        this.root.removeFolder(folder);
                    }
                }, "取消添加");

            }

        }, '添加组件')

        this.root.add({
            '删除组件': () => {
                console.log('删除组件')

                const editorAPI = getEditorAPI();
                let scriptNames = [];
                for (let script of nodeInfo.scripts) {
                    scriptNames.push(script.name);
                }
                scriptNames.shift();
                scriptNames.shift();
                if (scriptNames.length == 0) {
                    return;
                }
                let scriptName = { name: scriptNames[0] };
                const folder = this.root.addFolder("脚本列表");
                folder.open();
                folder.add(scriptName, 'name', scriptNames);
                folder.add({
                    '确定删除': () => {
                        editorAPI.removeScript(nodeInfo.uuId, scriptName.name);
                        const saveData = editorAPI.save();
                        fs.writeFileSync(editorAPI.currentSceneFilePath, saveData, 'utf-8');
                        this.root.removeFolder(folder);
                        editorAPI.changeScene(editorAPI.currentSceneFilePath);
                    }
                }, "确定删除");
                folder.add({
                    "取消删除": () => {
                        this.root.removeFolder(folder);
                    }
                }, "取消删除");
            }
        }, '删除组件')
    }
}

class PropertyEditComponentHost {

    private scriptUUID: string;
    constructor(scriptUUID: string) {
        this.scriptUUID = scriptUUID;
    }

    scriptRoot: any;

    save(name: string, value: any) {
        const newProperty = { name, value };
        const editorAPI = getEditorAPI();
        editorAPI.setScriptProperty(this.scriptUUID, newProperty);
        const saveData = editorAPI.save();
        fs.writeFileSync(editorAPI.currentSceneFilePath, saveData, 'utf-8');
    }
}